<template>
  <div class="market_page">
    <div class="market_content page_tab_bar">
      <!-- 搜索框 -->
      <div class="input_container">
        <span>
          <el-icon size="24"><Search /></el-icon>
        </span>
        <input type="text" placeholder="搜索" />
      </div>
      <!-- tab 头部 -->
      <ul class="header_list">
        <li
          v-for="(item, index) in coinTypeList.slice(0,5)"
          :key="index"
          @click="changeTab(index,item)"
          :class="{ actived: curActivedIndex == index }"
        >
          {{ item.name }}
        </li>
      </ul>
      <!-- 排序 -->
      <div class="order font_color">
        <div class="left">
          <p>
            <span>名称</span>
            <img src="@/assets/common/order_icon.png" alt="">
            <span>/成交量</span>
            <img src="@/assets/common/order_icon.png" alt="">
          </p>
        </div>
        <div class="right">
          <p>
            <span>最新价格</span>
            <img src="@/assets/common/order_icon.png" alt=""></img>
          </p>
          <p>
            <span>24h涨跌</span>
            <img src="@/assets/common/order_icon.png" alt=""></img>
          </p>
        </div>
      </div>
      <!-- tab 内容 -->
       <ul class="content_list">
        <li v-for="(item,index) in socketData"  :key="index" @click="goPage('/market/kline',item)">
          <div class="left">
            <!-- <p>BTC</p> -->
            <p>{{item.symbol}}</p>
            <p class="font_color">{{ item.symbol.split("/")[1] }}</p>
          </div>
          <div class="right">
            <div>${{ item.last }}</div>
            <div :class="item.raf > 0 ? 'success_btn' : 'delete_btn'">{{ Number(item.raf * 100).toFixed(2) }}%</div>
          </div>
        </li>
       </ul>
    </div>
  </div>
</template>

<script setup lang="ts">

import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useStartSpotWebsocket } from "@/utils/hook/useStartSpotWebsocket";
const {
  socketData,
  coinTypeId,
  coinTypeList,
  Toime,
  getAllAssort1,
  getAllCoin1,
} = useStartSpotWebsocket();

//获取路由对象
const router =useRouter()
// 当前高亮的 tab
const curActivedIndex = ref(0);

// tab 头部列表
const headerList = ref([
  { text: "自选" },     
  { text: "全部" },
  { text: "PCW" },
  { text: "NFT" },
  { text: "GAMEFI" },
]);
const swapData = ref([]);

// tab 内容列表
const assortsList: any = ref([])


// 切换 tab
const changeTab = (index: number,item: any) => {
  curActivedIndex.value = index;
  coinTypeId.value = item.id;
  getAllCoin1();
  Toime();
};

// 跳转指定页
const goPage = (path: string,item: any) => {
  router.push({
    path,
    query: {
      symbol: item.symbol
    }
  })
}

// 初始化数据
onMounted(() => {
  getAllAssort1("1")
})

</script>

<style lang="scss" scoped>
.market_page {
  .market_content {
    margin-top: 10px;
    .input_container {
      display: flex;
      align-items: center;
      padding: 10px 0px;
      // background-color: #141515;
      background-color: #292929;
      border-radius: 20px;
      & > span {
        display: flex;
        align-items: center;
        margin: 0 10px;
      }
      input {
        flex: 1;
        font-size: 18px;
        padding: 0 5px;
        background-color: #292929;
        color: #ffffff;
      }
    }
    .header_list {
      margin: 20px 0;
      color: #babcbf;
      display: flex;
      justify-content: space-between;
      text-align: center;
      li {
        flex: 1;
        padding: 5px 10px;

        
      }
      .actived {
          color: #ffffff;
          background-color: #141515;
          border-radius: 5px;
        }
    }
    .order {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0;
      div {
        p {
          display: flex;
          align-items: center;
          img {
            width: 18px;height: 18px;
          }
        }
      }
      &>.right {
        display: flex;
        justify-content: space-between;
        p {
          margin-left: 20px;
        }
      }
    }
    .content_list {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        .right {
          display: flex;
          div {
            // width: 70px;
            margin-left: 10px;
            padding: 5px 10px;
            border-radius: 5px;
          }
          &>div:last-child {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
